*{
    margin:0;
    padding: 0;    
}
.div1_static,.div1_fix,.div1_relative,.div1_abs
{
    width: 900px;
    height:700px;
}
.box_red,.box_green,.box_blue{
    width: 200px;
    height: 200px;
    position: static;
}
.box_red2,.box_green2,.box_blue2{
    width: 200px;
    height: 200px;
}
.box_red2{
    /*注意：fix定位，默认默认的固定为是为原始文档流元素所在位置。*/
    /*可以通过指定top等属性，控制其相对于整个浏览器的所处位置。*/
    /*进行fix定位后，该元素就在原始文档流中删除。*/
    position: fixed;
    top:100px;
    right:300px;
}
.div1_relative .box_red{
    /*指的是相对于元素原来的位置，进行定位偏移。*/
    /*仅仅偏移位置，而不从原始文档流中删除。*/
    position: relative;
    left:100px;
    top:100px;
}
.div1_relative .box_green{
    position: relative;
    left:300px;
}
.div1_abs{
    position: relative;
}
.div1_abs .box_red{
    position: absolute;
    left:100px;
    top:100px;
}
.box_red_sticky{
    position: sticky;    
    bottom:0;
    width: 200px;
    height:200px;
}